<div class="w-full text-sm text-white fixed bottom-0 right-0 z-40 opacity-80">
{{#each this.items as |item|}}
<div class="{{if (eq item.type 'check') 'bg-emerald-500' 'bg-red-500'}} {{item.type}} mb-1">
    <div class="container flex items-center justify-between px-2 py-1 mx-auto">
        <div class="flex items-center">
            <T::Icon @icon="{{item.type}}" class="text-base"/>
            <p class="mx-3">{{item.message}}</p>
        </div>
        <button class="p-1 transition-colors duration-300 transform rounded-md hover:bg-opacity-25 hover:bg-gray-600 focus:outline-none">
            <p {{on "click" this.closeMessage}}><T::Icon @icon="close" id="{{item.messageId}}"/></p>
        </button>
    </div>
</div>
{{/each}}
</div>